<template>
    <div class="login">
        <div class="left">
            <img :src="baseURL + settingStore.current.logo" />
            <div style="
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri,
              'Trebuchet MS', sans-serif;
            font-size: 25px;
            color:#383838;">
                {{ settingStore.current.logo_name }}
            </div>
        </div>
        <div class="right">
            <transition name="slide" v-if="isLoginForm">
                <el-form :model="form" key="login">
                    <el-form-item>
                        <el-input v-model="form.username" size="large" autocomplete="off" placeholder="请输入账号"
                            :prefix-icon="User" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.password" type="password" size="large" autocomplete="off"
                            placeholder="请输入密码" :prefix-icon="Lock" />
                    </el-form-item>
                </el-form>
            </transition>
            <transition name="slide" v-else>
                <el-form :model="form" key="register">
                    <!-- 注册表单内容 -->
                    <el-form-item>
                        <el-input v-model="form.username" size="large" autocomplete="off" placeholder="请输入账号"
                            :prefix-icon="User" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.password" type="password" size="large" autocomplete="off"
                            placeholder="请输入密码" :prefix-icon="Lock" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.nickname" size="large" autocomplete="off" placeholder="请输入昵称"
                            :prefix-icon="Aim" />
                    </el-form-item>
                </el-form>
            </transition>
            <div class="btns">
                <div class="tips">
                    <a @click="toggleForm">
                        {{ isLoginForm ? '没有账号？去注册' : '已有账号？去登录' }}
                    </a>
                    <el-checkbox label="记住密码" name="type" />
                </div>
                <el-button type="primary" @click="submit">{{ isLoginForm ? '登录' : '注册' }}</el-button>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref, reactive } from 'vue';
import { Lock, User, Aim } from '@element-plus/icons-vue';
import { login, register } from '@/api/user';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/useUser';
import { useSettingStore } from '@/stores/useSetting'
import { baseURL } from '@/config/baseURL'


const userStore = useUserStore()
const settingStore = useSettingStore()
const emits = defineEmits(['close'])

const form = reactive({
    isLogin: false,
    username: '',
    nickname: '',
    password: ''
});

const isLoginForm = ref(true);

//切换登录/注册
const toggleForm = () => {
    isLoginForm.value = !isLoginForm.value;
};

//提交登录
const submit = () => {
    //如果此时是登录
    if (isLoginForm.value) {
        login({ userinfo: { ...form } }).then(res => {
            if (res.data.code === 200) {
                userStore.userinfo = res.data.userinfo
                userStore.isLogin = true
                sessionStorage.setItem('token', res.data.token)
                ElMessage.success(res.data.message)
                emits('close')
                resetForm()
            } else {
                ElMessage.error(res.data.message)
            }
        })
    } else {
        register({ userinfo: { ...form } }).then(res => {
            if (res.data.code === 200) {
                ElMessage.success(res.data.message)
                emits('close')
            } else {
                ElMessage.error(res.data.message)
            }
        })
    }
}

const resetForm = () => {
    form.username = ''
    form.password = ''
    form.nickname = ''
}

</script>


<style scoped lang='less'>
.login {
    display: flex;
    padding: 40px 0;

    .left {
        width: 35%;
        text-align: center;
        // background-color: #1b1a1a;
        padding: 20px;
        border-right: 1px solid #e3e3e3;
        user-select: none;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .right {
        flex: 1;
        margin-left: 30px;
        padding: 0 10px 0 0;

        .btns {
            width: 100%;
            display: flex;
            flex-direction: column;

            .tips {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 30px;
                color: #777;

                a {
                    cursor: pointer;
                    transition: 0.1s;
                }

                a:hover {
                    color: #409eff;
                }
            }

            button {
                width: 100%;
                padding: 17px 0;
                margin-top: 15px;
            }
        }
    }
}

:deep(.el-button+.el-button) {
    margin: 0;
}
</style>